<template>
  <div>
    <div class="header" @click="goback">
      <i class="iconfont">&#xe669;</i>
      <span>歌单广场</span>
    </div>
      <!-- 导航菜单 -->
    <div class="daohang">
      <ul class="item">
        <router-link tag="li" to="tuijian" active-class='active'>推荐</router-link>
        <router-link tag="li" to="jingpin" active-class='active'>精品</router-link>
        <router-link tag="li" to="oumei" active-class='active'>欧美</router-link>
        <router-link tag="li" to="dianzi" active-class='active'>电子</router-link>
        <router-link tag="li" to="minyao" active-class='active'>民谣</router-link>
        <router-link tag="li" to="qingyinyue" active-class='active'>轻音乐</router-link>
        <router-link tag="li" to="hanyu" active-class='active'>韩语</router-link>
      </ul>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data () {
    return {
      num: 1
    }
  },
  methods: {
    goback () {
      this.$router.push({ name: 'index' })
    },
    changeclick1 () {
      this.num = 1
    }
  }
}
</script>
<style lang="stylus" scoped>
.header
  height 1.04rem
  line-height 1.04rem
  padding-left .2rem
  font-size .4rem
  font-weight 700
  i
    padding-right .2rem
.daohang
  width 100%
  .list
    height .32rem
.item
  display flex
  overflow scroll
  li
    flex 1
    min-width 1.4rem
    text-align center
    line-height 1rem
.active
  color #dd001b
  border-bottom 1px solid #dd001b
</style>
